#box1 {
    width: 100%;
    height: 12vw;
    background-image: url(../images/7dd2862a45a1a206.jpg);
    background-size: contain;
    background-repeat: no-repeat;

}

#box2 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5vw;
    display: flex;
    &>input{
        display: none;
    }

    &>.left {

        &>ul {
            width: 13vw;
            &>label {
                height: 4vw;
                width: 100%;
                font-size: 1vw;

                line-height: 4vw;
                position: relative;
                padding-left: 3vw;
                border-bottom: 1px solid #999;
                color: #000333;
                cursor: pointer;
                margin-bottom: 1vw;
            }

            &>label::before {
                content: ">";
                position: absolute;
                width: .5vw;
                height: 1vw;
                top: 50%;
                margin-top: -1.9vw;
                right: 2vw;
                // background-image: url(../images/bg.png);
            }
        }
    }

    &>.right {
        width: 63vw;
        position: relative;
        &>.item1 {
            width: 55vw;
            display: none;
            margin-left: 4vw;
            position: absolute;
            &>.name {
                font-size: 2vw;
                color: #333;
                font-weight: bold;
            }

            &>.name1 {
                font-size: .9vw;
                color: #999;
                font-weight: 400;
                margin-top: -.5vw;
                margin-bottom: 2vw;
            }

            &>.box2-content {
                border: 1px solid #ccc;
                padding: 1.5vw 2.3vw;
                line-height: 1.5;
                text-align: left;

                &>p {
                    font-size: .9vw;
                    color: #666;
                    margin-bottom: 1.3vw;
                }
            }
        }
        &>.item2 {
            width: 55vw;
            display: none;
            margin-left: 4vw;
            position: absolute;
            &>.name {
                font-size: 2vw;
                color: #333;
                font-weight: bold;
            }

            &>.name1 {
                font-size: .9vw;
                color: #999;
                font-weight: 400;
                margin-top: -.5vw;
                margin-bottom: 2vw;
            }

            &>.box2-content {
                border: 1px solid #ccc;
                padding: 1.5vw 2.3vw;
                line-height: 1.5;
                text-align: left;
                display: flex;
                flex-wrap: wrap;
                &>div{
                    width: 11.5vw;
                    height: 11.5vw;
                    margin-right: 1.3vw;
                    margin-bottom: 1.3vw;
                    overflow: hidden;
                }
                &>div:hover img{
                    transform: scale(1.2);
                }
                &>div:nth-child(4n){
                    margin-right: 0;
                }
            }
        }
    }

    &>input[id="bot1"]:checked~.left .a1{
        color: #fff;
        background-color: #b1191a;
    }
    &>input[id="bot1"]:checked~.left ul .a1::before{
        background-position: -7px 0;
    }
    &>input[id="bot1"]:checked~.right .item1{
        display: block;
    }
    &>input[id="bot2"]:checked~.left .a2{
        color: #fff;
        background-color: #b1191a;
    }
    &>input[id="bot2"]:checked~.left ul .a2::before{
        background-position: -7px 0;
    }
    &>input[id="bot2"]:checked~.right .item2{
        display: block;
    }
}